<template>
<div>

<el-row :gutter="20" class="mt40">

  <el-col :span="22" :offset="1" >
  	
  	<el-card class="box-card">
	  
  		<el-row :gutter="20" class="mt40">
  			<el-steps :active="step" align-center finish-status="success">
			  <el-step title="步骤1" description="注册账号"></el-step>
			  <el-step title="步骤2" description="填写公众号信息"></el-step>
			  <el-step title="步骤3" description="设置公众号信息"></el-step>
			</el-steps>
  		</el-row>

  		<div class="bg1 mt20" style="height:1px; width:100%;"></div>

  		<el-row :gutter="0" class="mt40">
  			<el-form ref="form" :model="form" label-width="280px">
  			  <template v-if="step == 1">
				<el-form-item label="商城名称:">
				  {{form.name}}
				</el-form-item>

				<el-form-item label="登录电话:">
				  {{form.mobile}}
				</el-form-item>

			  </template>

			  <template v-if="step == 2">
			  	<el-form-item label="有没有认证的服务号：">
				    <el-radio-group v-model="form.ispossess">
				      <el-radio label="1" >有</el-radio>
				      <el-radio label="0" >没有</el-radio>
				    </el-radio-group>
				</el-form-item>

				<template v-if="form.ispossess == '1'">
				    <el-form-item label="开发者ID(AppID):">
					  <el-input v-model="form.appid" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="开发者密码(AppSecret):">
					  <el-input v-model="form.appsecret" style="width:300px;"></el-input>
					</el-form-item>
					<!-- <el-form-item label="mch_id:">
					  <el-input v-model="form.mch_id" style="width:300px;"></el-input>
					</el-form-item> -->
					<el-form-item label="filename:">
					  <el-input v-model="form.filename" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="filecontent:">
					  <el-input v-model="form.filecontent" style="width:300px;"></el-input>
					</el-form-item>

				</template>	
			  </template>

			  <template v-if="step == 3">
			    <el-form-item v-show="userWXInfo.nickname == undefined" 
			    label="扫码绑定最高权限:">
				  	<qrcode-vue class="mt10" v-if="t1state"
				  		:value="url" 
				  		:size="200" level="H">
				  	</qrcode-vue>

				  	<span v-if="!t1state" class="pointer" @click="getRegisterState"> 点击获取二维码 </span>
				</el-form-item>

				<el-form-item v-show="userWXInfo.nickname != undefined" 
				label="头像:">
					<img :src="userWXInfo.headimgurl" width="150" height="150">
				</el-form-item>

				<el-form-item v-show="userWXInfo.nickname != undefined" 
				label="昵称:">
				  {{userWXInfo.nickname}}
				</el-form-item>
				
			  </template>

			  <el-form-item>
			    <!-- <el-button v-show="step == 1" type="primary" 
			    @click="gogo1">立即创建1</el-button> -->
			    <el-button v-show="step == 2" type="primary" 
			    @click="gogo2">保存</el-button>
			    <el-button v-show="step == 3" type="primary" 
			    :disabled="userWXInfo.nickname == undefined"
			    @click="gogo3">完成</el-button>
			    <el-button v-show="step != 1" 
			    @click="pre">上一步</el-button>
			    <el-button v-show="step != 3" 
			    @click="next">下一步</el-button>
			    <!-- <el-button>取消</el-button> -->
			  </el-form-item>
			</el-form>
  		</el-row>

	</el-card>
  </el-col>
</el-row>

<!--  -->

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import QrcodeVue from 'qrcode.vue';

export default {
	
	name : 'register',
	
	data () {
		return {
		  	form : {
		  		name : '',
		  		mobile : '',
		  		password : '',

		  		appid : '',
		  		appsecret : '',
		  		mch_id : '',
		  		filename : '',
		  		filecontent : '',

		  		ispossess : '1',
		  	},

		  	step : 1,


		  	t1 : {},

		  	t1count : 0,

		  	t1state : false,

		  	userWXInfo : {},

		  	//url : URL.shop + 'bindwx?company_code=',
		  	url : 'https://shop.hidlq.com/#/' + 'bindwx?company_code=',
		}
	},

	props : {

	},

	components : {
		QrcodeVue,
	},

	computed : {
		...mapGetters([
			'userInfo1',
			'URL',
		]),
	},

	methods : {

		gogo2 () {
			const para = {
				fun : 'createRegisterTwo',
				ispossess : this.form.ispossess,
				
				cb : res => {
					console.log(res);
					this.step = 3;
				}
			};

			if(this.form.ispossess == '1'){
				para['appid'] = this.form.appid;
				para['appsecret'] = this.form.appsecret;
				para['filename'] = this.form.filename;
				para['filecontent'] = this.form.filecontent;
			}

			console.log(para);

			this.$store.dispatch('update', para);
		},

		gogo3 () {

			const para = {
				fun : 'createRegisterThree',
				cb : res => {
					console.log(res);
					console.log('完成');
					this.$router.push({ 
						name: 'dashboard', 
					});
				}
			};

			console.log(para);

			this.$store.dispatch('update', para);

		},

		pre () {
			this.step = this.step - 1;
		},

		next () {
			this.step = this.step + 1;
		},

		getRegisterState () {
			this.t1count = 0;
			this.t1state = true;
			this.t1 = window.setInterval(res => {
				console.log('aaaaaa');

				this.t1count++;

				const para = {
					fun : 'getRegisterState',
					company_code : this.userInfo1.user.company_code,
					cb : res => {
						console.log(res);
						this.userWXInfo = JSON.parse(res);
						window.clearInterval(this.t1);
					},
					error : res => {

					},
				};

				this.$store.dispatch('update', para);

				console.log(this.t1count);
				if(this.t1count > 300) {
					this.t1state = false;
					window.clearInterval(this.t1);
				}


			}, 1000);

		},


		
	},

	watch : {
	    
	},

	mounted () {
		const para = {
			fun : 'userInfo1',
			requestType : 'get',
			cb : res => {
				console.log('111');
				console.log(res);

				this.form.mobile = res.user.mobile;
				this.form.name = res.user.company_name;

				this.url = this.url + res.user.company_code;

			}
		};

		this.$store.dispatch('query', para);


		const para1 = {
			fun : 'userAccount',
			requestType : 'get',
			cb : res => {
				console.log('222');
				console.log(res);
				if(res != undefined){
					this.form.appid = res.appid;
					this.form.appsecret = res.appsecret;
					this.form.filename = res.filename;
					this.form.filecontent = res.filecontent;
				}
				// this.form.mobile = res.user.mobile;
				// this.form.name = res.user.company_name;

			}
		};

		this.$store.dispatch('query', para1);


		const para2 = {
			fun : 'userStep',
			requestType : 'get',
			cb : res => {
				console.log('333');
				console.log(res);
				if(res.step == '3'){
					this.$router.push({ 
						name: 'dashboard', 
					});
				}
			}
		};

		this.$store.dispatch('update', para2);

		//this.getRegisterState();
	},

}
</script>

<style scoped>

</style>
